<template lang="html">
  <div class="container" v-loading="loading">
    <div class="search">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-input class="form_input" v-model="searchText" placeholder="请输入订单编号/客户姓名/设计师姓名/店铺名称/产品名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :disabled="loading" size="small" @click="onSubmit">搜索</el-button>
              <el-button type="primary" :disabled="isShutdownAudit" size="small" @click="onAuidt">一键打印</el-button>
            </el-form-item>
            <el-form-item>
                <el-select v-model="shippingMethod" @change="onSubmit">
                  <el-option label="配送方式" value=""></el-option>
                  <el-option label="快递配送" value="1"></el-option>
                  <el-option label="公司自提" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="arrivalType" @change="onSubmit">
                  <el-option label="到货时长" value=""></el-option>
                  <el-option label="当天" value="4"></el-option>
                  <el-option label="7天" value="1"></el-option>
                  <el-option label="15天" value="2"></el-option>
                  <el-option label="30天以上" value="3"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div class="export_excl">
          <el-button size="small" :disabled="isShutdownAudit" @click="exportExcl" type="primary">导出<i class="el-icon-upload el-icon--right"></i></el-button>
        </div>
    </div>

    <div class="tables">
      <vTable :tableData="tableData" ref="vTable" :tInData="tInData" @onCheckAll="onCheckAll" @onCheck="onCheck">
          <template slot="产品" slot-scope="scope">
            <div class="pro">
                <div class="pro_image">
                  <img :src="scope.row.picUrl" alt="" />
                </div>
                <div class="pro_info">
                  <div class="pro_name">{{scope.row.commodityName}}</div>
                  <div class="num_color">{{scope.row.materialName}}/{{scope.row.color}}/{{scope.row.laceName}}x{{scope.row.commodityNum}}</div>
                  <div class="address">地址：{{scope.row.address}}</div>
                </div>
            </div>
          </template>
          <template slot="客户" slot-scope="scope">
            <div class="userinfo">
                <p>ID：{{scope.row.memberId}}</p>
                <p>姓名：{{scope.row.userName}}</p>
                <p>手机号：{{scope.row.phone}}</p>
            </div>
        </template>

          <template slot="姓名签" slot-scope="scope">
            <div class="">{{scope.row.orderNameSign || scope.row.nameSign}}</div>
        </template>
          <template slot="配送方式" slot-scope="scope">
            <p v-if="scope.row.shippingMethod == 1">快递配送</p>
            <p v-if="scope.row.shippingMethod == 2">公司自提</p>
        </template>
          <template slot="备注" slot-scope="scope">
            <div class="remarks">
                <p>{{scope.row.remark}}</p>
                <el-button type="text" icon="el-icon-view" @click="handleClick(scope.row)"></el-button>
            </div>
        </template>
          <template slot="状态" slot-scope="scope">
            <div class="">
                <el-switch @change="onSwitch(scope.row)" v-model="scope.row.opState" :inactive-value="2" :active-value="1"
                    active-color="#4196FF" inactive-color="#D7D7D7"></el-switch>
            </div>
        </template>
          <template slot="操作" slot-scope="scope" >
            <div style="padding:0 10px;line-height: 40px;">
                <el-button size="mini" type="primary" v-if="scope.row.isReminderShipment == 2" @click="handleEdit(scope.row)">打印
                </el-button>
                <el-button size="mini" type="danger" @click="handleDetail(scope.row)">详情</el-button>
            </div>
        </template>
      </vTable>

    </div>

    <pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :currentPage="currentPage" :totalPage="totalPage" />

    <el-dialog title="查看备注" v-loading="loading" :visible.sync="dialogVisible2" :append-to-body="true" width="35%">
        <div class="">{{rows.remark}}</div>
    </el-dialog>
  </div>
</template>

<script>
import { baseUrl } from '@/api/http';
export default {
    data() {
        return {
            loading: false,
            dialogVisible2: false,
            searchText: '',
            arrivalType: '',
            shippingMethod: '',
            currentPage: 1,
            totalPage: 0,
            pageSize: 10,
            currentRowData: null,
            tableData: [],
            selectData: [],
            tInData: [
                {
                    props: 'orderSublistId',
                },
                {
                    props: 'createTime',
                },
                {
                    props: 'auditSuccessTime',
                },
                {
                    props: 'reminderShipmentTime',
                },
                {
                    title: '产品',
                    width: '350px',
                },
                {
                    title: '姓名签',
                    width: '120px',
                },
                {
                    title: '销售金额',
                    props: 'commodityPrice',
                    width: '120px',
                },
                {
                    title: '店铺',
                    props: 'branchStoreName',
                    width: '200px',
                },
                {
                    title: '客户',
                    width: '200px',
                },
                {
                    title: '设计师',
                    props: 'designerName',
                    width: '120px',
                },
                {
                    title: '成交价格',
                    props: 'successPrice',
                    width: '120px',
                },
                {
                    title: '结算价格',
                    props: 'realPrice',
                    width: '120px',
                },
                {
                    title: '配送方式',
                    width: '120px',
                },
                {
                    title: '备注',
                    width: '200px',
                },
                {
                    title: '状态',
                    width: '120px',
                },
                {
                    title: '操作',
                },
            ],
            rows: {}

        }
    },
    computed: {
        isShutdownAudit: function () {
            return this.selectData.length == 0 ? true : false;
        }
    },
    created() {
        this.selectOrderSendPage();
    },
    methods: {
        selectOrderSendPage() {
            this.loading = true;
            this.$http.selectOrderSendPage({
                shippingMethod: this.shippingMethod,
                query: this.searchText,
                arrivalType: this.arrivalType,
                pageSize: this.pageSize,
                pageNumber: this.currentPage
            }).then(res => {
                this.loading = false;
                this.tableData = Object.assign([], res.data.rows);
                this.tableData.forEach(item => {
                    if (item.createTime) {
                        item.createTime = this.formatTime(item.createTime);
                    }
                })
                this.totalPage = res.data.total;
                this.pageSize = res.data.pageSize;
            });
        },
        formatTime(value) {
            if (!value) return '';
            let oDate = new Date(value);
            let h = oDate.getHours() < 10 ? '0' + oDate.getHours() : oDate.getHours();
            let m = oDate.getMinutes() < 10 ? '0' + oDate.getMinutes() : oDate.getMinutes();
            let s = oDate.getSeconds() < 10 ? '0' + oDate.getSeconds() : oDate.getSeconds();
            return oDate.getFullYear() + '-' + (oDate.getMonth() + 1) + '-' + oDate.getDate() + ' ' + h + ':' + m + ':' + s;
        },
        handleClick(e) {
            this.rows = e;
            this.dialogVisible2 = true;
        },
        handleEdit(e) {
            this.$confirm('确认打印发货单？', '打印发货单').then(() => {
                this.$router.push({ path: '/print', query: { type: 3, id: e.orderSublistId } });
            }).catch(() => 0);
        },
        // onAuidt(){
        //   let ids = [];
        //   // for(let i=0;i<this.selectData.length;i++){
        //   for(let i=0;i<12;i++){
        //     let item = this.selectData[i];
        //     if(item.isReminderShipment != 2){
        //       this.$message.error('测量师未提醒发货，不可打印！！');
        //       return false;
        //     }
        //     ids.push(item.orderSublistId)
        //   }

        //   this.$confirm(`当前选中数量${this.selectData.length}，一键打印只支持12条`,'打印发货单').then(()=>{
        //     this.$router.push({path: '/print',query:{type:3,ids:ids.join(',')}});
        //   }).catch(()=>0);
        // },
        onAuidt() {
            let ids = [];
            for (let i = 0; i < this.selectData.length; i++) {
                let item = this.selectData[i];
                if (item.isReminderShipment != 2) {
                    this.$message.error('测量师未提醒发货，不可打印！！');
                    return false;
                }
                ids.push(item.orderSublistId)
            }
            this.$confirm(`当前选中订单数量${this.selectData.length}`, '打印发货单').then(() => {
                this.$router.push({ path: '/print', query: { type: 3, ids: ids.join(',') } });
            }).catch(() => 0);
        },
        handleDetail(e) {
            let { href } = this.$router.resolve({ path: '/receive/await_deliver/detail', query: { id: e.orderSublistId } })
            window.open(href, '_blank');
        },
        onCheckAll(val) {
            if (val.status) {
                this.selectData = [];
                this.tableData.forEach((item, index) => {
                    this.selectData.push(item);
                })
            } else {
                this.selectData = [];
            }
        },
        onCheck(val) {
            if (val.status) {
                this.tableData.forEach((item, index) => {
                    if (val.index == index) {
                        this.selectData.push(item);
                    }
                })
            } else {
                this.selectData = this.selectData.filter(arr => (arr.id !== this.tableData[val.index].id))
            }
        },
        onSwitch(e) {
            this.$http.closeOrderSend({ orderSublistId: e.orderSublistId, opState: e.opState }).then(res => {
                if (res.data.code === 0) {
                    this.$message.success(res.data.message);
                } else {
                    this.$message.error(res.data.message);
                }
            })
        },
        onSubmit() {
            this.handleCurrentChange(1);
        },
        handleSizeChange(e) {
            this.pageSize = e;
            this.handleCurrentChange(1);
        },
        handleCurrentChange(e) {
            this.$refs.vTable.onCheckAll(false);
            this.$refs.vTable.checkAll = false;
            this.selectData = [];
            this.currentPage = e;
            this.selectOrderSendPage();
        },

        exportExcl() {
            let ids = [];
            this.selectData.forEach(item => {
                ids.push(item.orderSublistId);
            });
            window.open(baseUrl + '/receive/receiveSendLogExportOrders?orderSublistIds=' + ids.join(','), '_self');
        },

    }
}
</script>

<style lang="css" scoped>
.search {
    position: relative;
}
.export_excl {
    position: absolute;
    right: 0;
    top: 0;
}
</style>
